// 问题管理-问题列表
<template>
  <div class="h-100">
    <div class="tree-box moreLine" :style="{ paddingBottom: transferHeight.pb + 'px' }">
      <div>
        <span>设备所在辖区</span>
        <treesBox v-if="shuaxingTree" :treesBox="treesBox" @handleNodeClick="treeClick($event)"></treesBox>
      </div>
    </div>
    <div class="problemList">
      <div class="problem-R bg-f2" :style="{ minHeight: transferHeight.contentH + 'px' }">
        <el-row :gutter="15">
          <el-col :span="14">
            <div class="bg-f2 bg-fff" style="height: 550px">
              <el-row class="tiitleBox">
                <el-col :span="8">
                  <span class="tabulationTime">制表时间:{{ zbTime | dateFormat }}</span>
                </el-col>
                <el-col :span="8" align="center"><span class="title">资产分类统计</span></el-col>
                <el-col :span="8" align="right">
                  <el-link type="primary" icon="el-icon-download" :underline="false" :href="daochuUrl()" target="_blank">导出</el-link>
                </el-col>
              </el-row>
              <!-- stripe -->
              <el-table
                :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '40px' }"
                ref="multipleTable"
                :data="tableData"
                max-height="480px"
                style="width: 100%"
                border
                highlight-current-row
                v-loading="tableLoad"
                show-summary
                :summary-method="getSummaries"
              >
                <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
                <el-table-column prop="SBLX" label="设备类型" show-overflow-tooltip min-width="140"></el-table-column>
                <el-table-column prop="SBSL" label="数量" min-width="80">
                  <template slot-scope="scope">
                    <span>{{ Number(scope.row.SBSL) === 0 ? '-' : scope.row.SBSL }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="ZXS" label="在线数" min-width="100">
                  <template slot-scope="scope">
                    <span>{{ Number(scope.row.ZXS) === 0 ? '-' : scope.row.ZXS }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="LXS" label="离线数" min-width="100">
                  <template slot-scope="scope">
                    <span>{{ Number(scope.row.LXS) === 0 ? '-' : scope.row.LXS }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="ZXL" label="在线率" min-width="100">
                  <template slot-scope="scope">
                    <span>{{ Number(scope.row.ZXL) === 0 ? '-' : scope.row.ZXL + '%' }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="bg-f2 bg-fff" style="height: 550px">
              <el-radio-group v-model="radioList" @change="radioChang">
                <el-radio-button label="资产分类统计"></el-radio-button>
                <el-radio-button label="资产在线率统计"></el-radio-button>
              </el-radio-group>
              <div v-if="reload" style="height: 100%">
                <echarts-load v-if="pieFlag || reload_pie" :chartFlag="pieFlag" :reload="reload_pie" @refreshF="refreshPie" />
                <zcfltj-bar v-else :barData="barData" />
              </div>
              <div v-else-if="!reload" style="height: 100%">
                <echarts-load v-if="pieFlagTwo || reload_pieTwo" :chartFlag="pieFlagTwo" :reload="reload_pieTwo" @refreshF="refreshPieTwo" />
                <zczxl-bar v-else :zxlbarData="zxlbarData" />
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { ziC } from '@/utils/allUrl.js'
import { getUrl } from '@/utils/getUrl.js'
// import { endLoading } from '@/utils/loading.js'
import treesBox from '@/components/treesBoxTow/index.vue'
// tableMessageText
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
import echartsLoad from '@/components/Echarts/echartsLoad'
import { threeLevelH } from '@/assets/js/calcHeight'
import zcfltjBar from '@/components/Echarts/TJ/zcfltj'
import zczxlBar from '@/components/Echarts/TJ/zczxl'
export default {
  computed: {
    transferHeight() {
      // 计算屏幕滚动高度 - nav - 导航栏
      return {
        contentH: window.innerHeight - threeLevelH,
        pb: threeLevelH,
      }
    },
  },
  data: function () {
    return {
      treesBox: {
        // url: 'yonghu/selectYongHuXiaQuByWtjs',
        url: 'zcbb/selectZiChanXiaQuTongJi',
        // GZKZ: false
      }, // tree图的请求地址
      shuaxingTree: true, // 刷新tree
      tableLoad: false, // 列表加载样式
      radioList: '资产分类统计', // top切换
      reload: true,
      pieFlag: false, // 统计加载蒙层
      reload_pie: false, // 统计重新加载
      pieFlagTwo: false, // 在线率加载蒙层
      reload_pieTwo: false, // // 在线率统计重新加载
      pieTimer: null, // 统计定时器
      barTimer: null, // 在线率定时器
      tableTimer: null, // 列表定时器
      tableMessage: '', // 提示
      piliandaorumoban: ziC,
      // 列表数据
      tableData: [],
      daochu: '', // 导出省市区
      nameDC: '', // 键名
      valueDC: '', // 值
      zbTime: 0, // 制表时间
      // echaets 数据
      barData: {
        all: 0,
        color: '#409EFF',
        charts: {},
      },
      zxlbarData: {
        title: '在线率',
        color: '#91CC75',
        danwei: '%',
        wz: [],
        sj: [],
      },
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.tableData = []
          this.tableMessage = tableMessageText
          // this.total = 0
        }
      }, timeLoad)
    },
    pieFlag(newVal, oldVal) {
      this.pieTimer = setTimeout(() => {
        if (this.pieFlag) {
          this.pieFlag = false
          this.reload_pie = true
        }
      }, timeLoad)
    },
    pieFlagTwo(newVal, oldVal) {
      this.barTimer = setTimeout(() => {
        if (this.pieFlagTwo) {
          this.pieFlagTwo = false
          this.reload_pieTwo = true
        }
      }, timeLoad)
    },
    tableData: function () {
      this.$nextTick(function () {
        // 默认选中第一行
        // this.$refs.multipleTable.setCurrentRow(this.tableData[0])
      })
    },
  },
  created: function () {
    // 按钮权限
    // this.jurisdictionBtn()
    // this.pieFlag = true
    // this.pieFlagTwo = true
    this.getList()
  },
  components: { treesBox, zcfltjBar, zczxlBar, echartsLoad },
  methods: {
    // 获取按钮权限
    jurisdictionBtn() {
      const menus = JSON.parse(getUrl('jurisdiction'))
      menus.forEach((item) => {
        if (item.qxdm === 'YWZX_WTGL_WTLB') {
          item.children.forEach((item2) => {
            if (item2.qxdm === 'wtjs:updateWenTiJianSuo') {
              this.quanxianBtns.btn1 = true // 问题生成故障
            } else if (item2.qxdm === 'wtjs:insertWTBMD') {
              this.quanxianBtns.btn2 = true // 问题批量生成白名单
            } else if (item2.qxdm === 'wtjs:deleteMoreWenTiJianSuo') {
              this.quanxianBtns.btn3 = true // 问题批量删除
            }
          })
        }
      })
    },
    // tree形搜索
    treeClick(e) {
      this.daochu = e.type
      if (e.type.levels === 1) {
        this.nameDC = 'SF'
        this.valueDC = e.type.label
      } else if (e.type.levels === 2) {
        this.nameDC = 'CS'
        this.valueDC = e.type.label
      } else if (e.type.levels === 3) {
        this.nameDC = 'QX'
        this.valueDC = e.type.label
      } else if (e.type.levels === 4) {
        this.nameDC = 'XZJD'
        this.valueDC = e.type.label
      }
      this.getList(e.type)
    },
    // 获取数据
    async getList(val) {
      const params = new URLSearchParams()
      if (val) {
        if (val.levels === 1) {
          params.append('SF', val.label)
        } else if (val.levels === 2) {
          params.append('CS', val.label)
        } else if (val.levels === 3) {
          params.append('QX', val.label)
        } else if (val.levels === 4) {
          params.append('XZJD', val.label)
        }
      }
      this.tableLoad = true
      this.pieFlag = true
      const zxlName = []
      const zxlNum = []
      const obj = {}
      let allBox = null
      const { data: res } = await this.$http.post(`${ziC}zcbb/ziChanTongJi`, params)
      if (res.code !== '0000') {
        this.tableMessage = res.message
      } else {
        this.tableData = res.data.list
        this.zbTime = res.data.time
        res.data.list.forEach((item) => {
          obj[item.SBLX] = item.SBSL
          allBox += Number(item.SBSL)
          zxlName.push(item.SBLX)
          zxlNum.push(item.ZXL)
        })
        const fenleiList = {
          all: allBox,
          color: '#409EFF',
          charts: obj,
        }
        const zlxList = {
          title: '在线率',
          color: '#91CC75',
          danwei: '%',
          wz: zxlName,
          sj: zxlNum,
        }
        this.barData = fenleiList
        this.zxlbarData = zlxList
        clearTimeout(this.tableTimer)
        clearTimeout(this.pieTimer)
        clearTimeout(this.barTimer)
        this.tableLoad = false
        this.pieFlag = false
        // console.log(fenlei)
      }
    },
    radioChang(val) {
      switch (val) {
        case '资产分类统计':
          this.reload = true
          break
        default:
          this.reload = false
          break
      }
    },
    refreshPie() {
      this.reload_pie = false
    },
    refreshPieTwo() {
      this.reload_pieTwo = false
    },
    // 合记
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((item, index) => {
        if (index === 0) {
          sums[index] = ' '
          return
        }
        const values = data.map((item2) => Number(item2[item.property]))
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              if (index === columns.length - 1) {
                return '-'
              } else {
                return prev + curr
              }
            } else {
              return prev
            }
          }, 0)

          sums[columns.length - 1] += ' '
        } else {
          sums[index] = '合计'
        }
      })
      return sums
    },
    // 导出url
    daochuUrl() {
      let obj = ''
      if (this.daochu) {
        obj = this.nameDC + '=' + this.valueDC
      } else {
        obj = ''
      }
      return this.piliandaorumoban + 'zcbb/ziChanTongJiExcel?' + obj
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/problemList.scss';
$c909399: #909399;
$c333333: #333333;
$c039D12: #039d12;
::v-deep .el-radio-button__inner {
  padding: 0 10px !important;
}
.tiitleBox {
  padding-bottom: 10px;
}
.tabulationTime {
  color: #7f7f7f;
}
.title {
  font-size: 16px;
  color: #333333;
}
::v-deep .el-table__body tr.current-row > td {
  background-color: #69a8ea !important;
  color: #fff;
}
</style>
